<template>
  <div>
    <div class="g-m-t-10">
      <span>{{values.title}}</span>
      <span class="g-f-r" @click="handleMore">{{values.sum}}</span>
      <div class="g-flex g-w g-o-x-s g-s-h">
        <div class="g-relative g-m-t-10 g-m-r-10" v-for="item in 20" :key="item" @click="changeRouter('detail-up', item)">
          <img class="up-crad-img" :src="values.poster" alt="">
          <van-tag
            class="g-absolute g-t-5 g-r-5"
            color="red"
            round>
            付费
          </van-tag>
          <div class="g-w g-absolute g-t-60 g-m-l-10">
            <span>{{values.count}}</span>
            <span class="g-f-r g-m-r-20">{{values.time}}</span>
          </div>
          <div class="g-m-t-10">{{values.title2}}</div>
        </div>
      </div>
    </div>
    <div class="bug-video g-m-t-10 g-flex g-jc-sa" v-show="values.hasBuy">
      <span>限时五折</span>
      <span>￥199</span>
      <span class="g-m-r-10">￥398</span>
      <span>13:14:00</span>
      <span>购买合集 ></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Collection',
  props: {
    values: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  emits: ['more'],
  setup(props, ctx) {
    const handleMore = () => ctx.emit('more')

    return {
      handleMore
    }
  }
}
</script>

<style lang="scss" scoped>
.g-flex {
  display: flex;
}
.g-jc-sb {
  justify-content: space-between;
}
.g-jc-sa {
  justify-content: space-around;
}
.g-m-l-10 {
  margin-left: 10px;
}
.g-m-r-10 {
  margin-right: 10px;
}
.g-m-r-20 {
  margin-right: 20px;
}
.g-m-t-10 {
  margin-top: 10px;
}
.g-m-l-a {
  margin-left: auto;
}
.g-f-r {
  float: right;
}
.g-w {
  width: 100%;
}
.g-o-x-s {
  overflow-x: scroll;
}
.g-s-h::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.g-relative {
  position: relative;
}
.g-absolute {
  position: absolute;
}
.g-t-60 {
  top: 60px;
}
.g-t-5 {
  top: 5px;
}
.g-r-5 {
  right: 5px;
}
.up-advert-img {
  width: 54px;
  height: 34px;
  border-radius: 2px;
}
.up-head-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.up-name {
  height: 20px;
  font-size: 14px;
}
.up-btn {
  height: 28px;
}
.up-crad-img {
  width: 140px;
  height: 80px;
  border-radius: 2px;
}
.bug-video {
  width: 96%;
  height: 30px;
  line-height: 30px;
  border: 1px solid red;
  border-radius: 15px;
  vertical-align: middle;
  background: palevioletred;
}
.list-img {
  width: 150px;
  height: 60px;
  border-radius: 4px;
}
</style>